<template>
  <div class="student-info" v-loading="pageLoading">
    <div class="student-info-container">
      <div class="info-title">学员基本信息</div>
      <div class="basic-infos">
        <img src="/src/assets/default-boy.png" alt />
        <div class="basic-info">
          <div>
            <span class="student-name">{{studentData.studentName}}</span>
            <span>{{studentData.schoolName}}</span>
          </div>
          <div>
            <span class="info-label">手机号:</span>
            <span class="info-value">{{studentData.mobile}}</span>
            <span class="info-label">校区:</span>
            <span class="info-value">{{studentData.campusName}}</span>
            <span class="info-label" style="color:#72b22a">待上课次</span>
            <span class="info-value">{{studentData.classHour}}</span>
          </div>
        </div>
      </div>
      <div class="achievement-info">
        <div class="edit-student-info" @click="editStudentInfo">
          <img src="/src/assets/myStudent/student-edit.png" alt />
        </div>
        <div class="achievement-item">
          <span class="info-label">平时成绩：</span>
          <span class="info-value">{{studentData.achievement}}</span>
        </div>
        <div class="achievement-item">
          <span class="info-label">性格：</span>
          <span class="info-value">{{studentData.nature}}</span>
        </div>
        <div class="achievement-item">
          <span class="info-label">优势学科：</span>
          <span class="info-value">{{studentData.majorSubjects}}</span>
        </div>
        <div class="achievement-item">
          <span class="info-label">弱势学科：</span>
          <span class="info-value">{{studentData.weakSubjects}}</span>
        </div>
        <div class="achievement-item">
          <span class="info-label">入学测成绩：</span>
          <span class="info-value">{{studentData.entranceExam}}</span>
        </div>
      </div>
      <div class="learn-description">
        <div class="decorate">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div
          contenteditable
          v-html="studentData.schoolStudyDesc"
          @blur="setSchoolStudyDesc"
          class="container-input"
          data-placeholder="在校学习情况"
          :class="{
            'has_content': !!studentData.schoolStudyDesc,
            'is_focus': schoolStudyDescFocus
          }"
          @focus="schoolStudyDescFocus = true"
        ></div>
      </div>
    </div>
    <div class="teach-plan-container">
      <div class="container-title">教学总体规划</div>
      <div class="container-content">
        <div
          contenteditable
          v-html="studentData.masterPlan"
          @blur="setMasterPlan"
          class="container-input"
          data-placeholder="请输入内容～"
          :class="{
            'has_content': !!studentData.masterPlan,
            'is_focus': masterPlanFocus
          }"
          @focus="masterPlanFocus = true"
        ></div>
        <div class="container-footer"></div>
      </div>
    </div>
    <div class="parent-school-container">
      <div class="container-title">家校配合</div>
      <div class="container-content">
        <div
          contenteditable
          @blur="setCooperateDesc"
          v-html="studentData.cooperateDesc"
          class="container-input"
          data-placeholder="请输入内容～"
          :class="{
            'has_content': !!studentData.cooperateDesc,
            'is_focus': cooperateDescFocus
          }"
          @focus="cooperateDescFocus = true"
        ></div>
        <div class="container-footer"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watch, onMounted } from 'vue'
import StudentInfoForm from './components/student-form.vue'
import $ from '$'
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  props: {
    studentId: String,
    lessonId: String,
    data: {
      type: Object,
      default: {},
    },
    searchType: {
      type: Number,
      default: '',
    },
  },
  components: { StudentInfoForm },
  setup(props) {
    onMounted(() => {
      props.studentId && getStudentInfo()
    })
    let studentData = ref({
      schoolName: '',
      achievement: '',
      nature: '',
      majorSubjects: '',
      weakSubjects: '',
      totalScore: '',
      haveScore: '',
      masterPlan: '',
      cooperateDesc: '',
      schoolStudyDesc: '',
    })
    let schoolStudyDescFocus = ref(false)
    let cooperateDescFocus = ref(false)
    let masterPlanFocus = ref(false)
    let pageLoading = ref(false)
    const getStudentInfo = async () => {
      if (!props.studentId) return
      pageLoading.value = true
      let res = await $.http.post('/admin/studentInfo/queryInfo', {
        studentId: props.studentId,
        searchType: props.searchType,
        lessonId: props.lessonId, 
      })
      pageLoading.value = false
      if (res.result) {
        studentData.value = res.json
        return
      }
      ElMessage.error(res.msg)
    }
    watch(
      () => props.studentId,
      () => {
        getStudentInfo()
      }
    )
    const setMasterPlan = (e) => {
      masterPlanFocus.value = false
      studentData.value.masterPlan = e.target.innerHTML
      !!studentData.value.masterPlan && saveStudentMsg()
    }
    const setCooperateDesc = (e) => {
      cooperateDescFocus.value = false
      studentData.value.cooperateDesc = e.target.innerHTML
      !!studentData.value.cooperateDesc && saveStudentMsg()
    }
    const setSchoolStudyDesc = (e) => {
      schoolStudyDescFocus.value = false
      studentData.value.schoolStudyDesc = e.target.innerHTML
      !!studentData.value.schoolStudyDesc && saveStudentMsg()
    }
    const editStudentInfo = async () => {
      let formData = await $.modal.create({
        title: '学生基本信息',
        width: 520,
        component: StudentInfoForm,
        props: { studentData: studentData.value },
      })
      formData.entranceExam = `${formData.haveScore}/${formData.totalScore}`
      for (let key in formData) {
        studentData.value[key] = formData[key]
      }
      saveStudentMsg()
    }
    const saveStudentMsg = async () => {
      let res = await $.http.json('/admin/studentInfo/saveOrUpdate', {
        ...studentData.value,
        lessonId: props.data.type ? props.data.lessonId : props.data.contractId ,
        studentId: props.studentId,
      })
      res.result && getStudentInfo()
    }
    return {
      studentData,
      editStudentInfo,
      pageLoading,
      getStudentInfo,
      setMasterPlan,
      setCooperateDesc,
      setSchoolStudyDesc,
      schoolStudyDescFocus,
      cooperateDescFocus,
      masterPlanFocus,
    }
  },
}
</script>

<style scoped lang="scss">
.student-info {
  height: calc(100% - 60px);
  padding: 30px 40px;
  overflow-y: auto;
  .student-info-container {
    padding: 15px 20px;
    background: #f5f9fd;
    border-radius: 6px;
    position: relative;
    .edit-student-info {
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
      border-radius: 0px 6px 0px 6px;
      border: 1px solid #e4e7ed;
      padding: 7px;
      position: absolute;
      right: -1px;
      top: -1px;
      cursor: pointer;
      > img {
        height: 26px;
        width: 26px;
      }
    }
    .info-title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .basic-infos {
      display: flex;
      align-items: center;
      margin-top: 14px;
      > img {
        height: 61px;
        width: 61px;
      }
      .basic-info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        > div {
          margin: 0 0 10px 24px;
          .student-name {
            font-size: 24px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin: 0 12px 10px 0;
          }
        }
        :nth-child(2) {
          margin-bottom: 0;
          .info-value {
            margin: 0 50px 0 6px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }
    .achievement-info {
      padding: 12px 31px;
      margin: 20px 20px 0 50px;
      border: 2px solid #dee4f1;
      display: grid;
      grid-template: auto / repeat(2, 50%);
      grid-row-gap: 12px;
      position: relative;
      .achievement-item {
        position: relative;
        padding-left: 10px;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: calc(50% - 4px);
          height: 6px;
          width: 6px;
          background: #72b22a;
          border-radius: 50%;
        }
      }
    }
    .learn-description {
      background: #ffffff;
      height: 90px;
      border-radius: 6px;
      border: 1px solid #dee4f1;
      margin: 20px 20px 0 50px;
      position: relative;
      display: flex;
      padding: 15px 42px;
      > span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .container-input {
        height: 100%;
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        padding: 0;
        overflow: auto;
        &:focus {
          outline: none;
        }
      }
      &::before {
        content: '';
        background: #fbbd42;
        border-radius: 3px;
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 5px;
      }
      .decorate {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        position: absolute;
        left: 15px;
        top: 0px;
        bottom: 0px;
        width: 12px;
        > div {
          width: 12px;
          height: 12px;
          background: #ecf4fc;
          border-radius: 50%;
        }
      }
    }
  }
  .teach-plan-container {
    margin: 30px 0;
    .container-title {
      background: #fef7e8;
    }
  }
  .parent-school-container {
    .container-title {
      background: #f5f9fd;
    }
  }
  .container-title {
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #dee4f1;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 5px 20px;
    display: inline-block;
    border-bottom: none;
  }
  .container-content {
    height: 163px;
    position: relative;
    border-radius: 0px 10px 10px 10px;
    border: 1px solid #dee4f1;

    .container-footer {
      height: 22px;
      background: rgba(56, 42, 116, 0.07);
      border-radius: 0px 0px 10px 10px;
      border: 1px solid #ebf0fc;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
  .container-input {
    height: calc(100% - 25px);
    padding: 22px;
    overflow: auto;
    user-modify: read-write-plaintext-only;
    -webkit-user-modify: read-write-plaintext-only;
    &:focus {
      outline: none;
    }
    &::before {
      content: attr(data-placeholder);
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
  .has_content {
    &::before {
      display: none;
    }
  }
  .is_focus {
    &::before {
      display: none;
    }
  }
}
</style>
